<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=750,maximum-scale=1,user-scalable=no">
    <title>数字尾巴 | 分享美好数字生活</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3027260_c1pt3aybfaj.css">
    <link rel="stylesheet" href="./css/clearSure.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/tabs.css">
    <link rel="stylesheet" href="./css/activity.css">
    <meta name="referrer" content="no-referrer">
</head>

<body>
    <div class="content">
        <div class="nav_bg">
            <header>
                <div class="logo_img">
                    <img src=""
                        alt="">
                </div>
                <a href="#">
                    下载 APP
                </a>
                <div class="search">
                    <i class="iconfont icon-sousuoleimu"></i>
                </div>
            </header>
        </div>

    </div>
    <div class="switch">
        <div class="header_search">
            <div class="search_ipt">
                <i class="iconfont icon-search-copy"></i>
                <input type="text" placeholder="iPhone X">
            </div>
            <div class="header_close">
                <i class="iconfont icon-error"></i>
            </div>
        </div>
        <ul class="header-modules">
            <li class="header-module">
                <a href="./comment.html">
                    <img src="./img/comment.png" alt="">
                    <p>点评</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./article.html">
                    <img src="./img/article.png" alt="">
                    <p>文章</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./news.html">
                    <img src="./img/news.png" alt="">
                    <p>鲸闻</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./evaluating.html">
                    <img src="./img/test.png" alt="">
                    <p>众测</p>
                </a>
            </li>
        </ul>
        <ul class="header-modules">
            <li class="header-module">
                <a href="./activity.html">
                    <img src="./img/activity.png" alt="">
                    <p>活动</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./aside.html">
                    <img src="./img/lie.png" alt="">
                    <p>闲置</p>
                </a>
            </li>
            <li class="header-module">
                <a href="">
                    <img src="./img/recycling.png" alt="">
                    <p>手机回收</p>
                </a>
            </li>
            <li class="header-module">
                <img src="" alt="">
                <p></p>
            </li>
        </ul>
        <div class="line"></div>
        <div class="header_login">
            <a href="">登录</a>
        </div>
    </div>
    <div class="all">
        <div class="tab">
            <div class="tab_tittle">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide tabActive">全部活动</div>
                        <div class="swiper-slide">专题活动</div>
                        <div class="swiper-slide">线上活动</div>
                        <div class="swiper-slide">线下活动</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="p_content">

        </div>
        <div class="p_content none">
            <div class="activityBar">
                <div class="activityBar_item">
                    <div class="activityBar_item_img_box">
                        <img src="https://s1.dgtle.com/dgtle_img/activity/2021/12/31/12648202112312222526394_1800_500.jpeg?imageView2/2/w/600/q/100/format/jpg" alt="">
                    </div>
                    <div class="activityBar_item_right">
                        <p class="activityBar_item_title">一人一句，告别 2021 年</p>
                        <p class="activityBar_item_time">
                            12天前 · 深夜俱乐部
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="p_content none">
            <div class="activityBar">
                <div class="activityBar_item">
                    <div class="activityBar_item_img_box">
                        <img src="https://s1.dgtle.com/dgtle_img/activity/2021/12/31/12648202112312222526394_1800_500.jpeg?imageView2/2/w/600/q/100/format/jpg" alt="">
                    </div>
                    <div class="activityBar_item_right">
                        <p class="activityBar_item_title">一人一句，告别 2021 年</p>
                        <p class="activityBar_item_time">
                            12天前 · 深夜俱乐部
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="p_content none">
            <div class="activityBar">
                <div class="activityBar_item">
                    <div class="activityBar_item_img_box">
                        <img src="https://s1.dgtle.com/dgtle_img/activity/2021/12/31/12648202112312222526394_1800_500.jpeg?imageView2/2/w/600/q/100/format/jpg" alt="">
                    </div>
                    <div class="activityBar_item_right">
                        <p class="activityBar_item_title">一人一句，告别 2021 年</p>
                        <p class="activityBar_item_time">
                            12天前 · 深夜俱乐部
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="app">
        <div class="openInApp">APP内打开</div>
    </div>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/font-size.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="baseurl.js"></script>
    <script>
        window.onload = () => {
                let cont = document.querySelectorAll('.p_content')[0]
                let aclass = ''
                myput("/activity", {
                    aclass
                }).then(res => {
                    let str = ''
                    res.data.data.forEach((item, index) => {
                        if (index < 15) {
                            str += `
                        <div class="activityBar">
                            <div class="activityBar_item">
                                <div class="activityBar_item_img_box">
                                    <img src="${item.img}" alt="">
                                </div>
                                <div class="activityBar_item_right">
                                    <p class="activityBar_item_title">${item.activity_tittle}</p>
                                    <p class="activityBar_item_time">
                                        ${item.activity_time}
                                    </p>
                                </div>
                            </div>
                        </div>
                          `
                        }
                    })
                    cont.innerHTML = str
                }).catch(err => {
                    console.log(err);
                })

            }
            // 选择改变
        var tabChange = () => {
                let flag = 0
                let nowChose = document.querySelectorAll('.p_content')
                    // 获取当前选中板块
                nowChose.forEach((item, index) => {
                        if (item.classList.value == 'p_content') {
                            flag = index
                        }
                    })
                    // 大标题改变 
                document.querySelectorAll('.tab_tittle .swiper-slide').forEach((item, index) => {
                        index == flag ? item.classList.add('tabActive') : item.classList.remove('tabActive')
                    })
                    // 菜单标题改变
                let menu = document.querySelectorAll('.clickPopup_lable li span').forEach((item, index) => {
                    index == flag - 1 ? item.classList.add('sortActive') : item.classList.remove('sortActive')
                })
                console.log(flag);

                let aclass = ''
                if (flag == 1) {
                    aclass = '专题'
                } else if (flag == 2) {
                    aclass = '深夜俱乐部'
                } else if (flag == 3) {
                    aclass = '尾巴沙龙'
                }
                myput("/activity", {
                    aclass
                }).then(res => {
                    let str = ''
                    res.data.data.forEach((item, index) => {
                        if (index < 15) {
                            str += `
                        <div class="activityBar">
                            <div class="activityBar_item">
                                <div class="activityBar_item_img_box">
                                    <img src="${item.img}" alt="">
                                </div>
                                <div class="activityBar_item_right">
                                    <p class="activityBar_item_title">${item.activity_tittle}</p>
                                    <p class="activityBar_item_time">
                                        ${item.activity_time}
                                    </p>
                                </div>
                            </div>
                        </div>
                          `
                        }
                    })
                    nowChose[flag].innerHTML = str
                }).catch(err => {
                    console.log(err);
                })
            }
            // 菜单框选择
        document.querySelectorAll('.sort_ul li').forEach((item, index) => {
            item.onclick = () => {
                let flag = 0;
                document.querySelectorAll('.sort_ul li').forEach(item => {
                    item.classList.remove('sortActive')
                    flag = index
                })
                item.classList.add('sortActive')
                    // 遍历内容隐藏和显示
                document.querySelectorAll('.p_content').forEach(item => {
                    item.classList.add('none')
                })
                document.querySelectorAll('.clickPopup_lable li span').forEach((item, index) => {
                    item.classList.remove('sortActive')
                })
                document.querySelectorAll('.p_content')[flag].classList.remove('none')
                document.querySelector('.clickShowBox').classList.add('none')
                tabChange()
            }
        })
        document.querySelectorAll('.clickPopup_lable li span').forEach((item, index) => {
                item.onclick = () => {
                    let flag = 0;
                    document.querySelectorAll('.clickPopup_lable li span').forEach(item => {
                        item.classList.remove('sortActive')
                        flag = index + 1
                    })
                    item.classList.add('sortActive')
                        // 遍历内容隐藏和显示
                    document.querySelectorAll('.p_content').forEach(item => {
                        item.classList.add('none')
                    })
                    document.querySelectorAll('.p_content')[flag].classList.remove('none')
                    document.querySelector('.clickShowBox').classList.add('none')
                    tabChange()
                }
            })
            //tab标题切换
        var tab_title = document.querySelectorAll('.tab_tittle .swiper-slide')
        tab_title.forEach((item, index) => {
            item.onclick = () => {
                let flag = 0
                tab_title.forEach(item => {
                    item.classList.remove('tabActive')
                })
                item.classList.add('tabActive')
                flag = index
                document.querySelectorAll('.p_content').forEach(item => {
                    item.classList.add('none')
                })
                document.querySelectorAll('.p_content')[flag].classList.remove('none')
                tabChange()

            }
        })

        // 顶部tab切换
        var swiper = new Swiper(".swiper", {
            slidesPerView: 3.5,
            spaceBetween: 0,
            freeMode: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });


        // 搜索切换
        $('.search').click(() => {
            $('.content').css({
                'display': ' none'
            })
            $('.switch').css({
                'display': 'block'
            })
            $('body').css({
                'background': '#fff'
            })
            document.querySelector('.all').classList.add('none')
        })
        $('.header_close').click(() => {
            $('.content').css({
                'display': ' block'
            })
            $('.switch').css({
                'display': 'none'
            })
            $('body').css({
                'background': '#f5f5f5'
            })
            document.querySelector('.all').classList.remove('none')
        })
        document.querySelector('.content .logo_img').onclick = () => {
            location.href = 'index.html'
        }
    </script>
</body>

</html>